﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById("Canvas1");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
            ctx.moveTo(110, 75);
            ctx.arc(75, 75, 35, 0, Math.PI, false);   // Mouth (clockwise)
            ctx.moveTo(65, 65);
            ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
            ctx.moveTo(95, 65);
            ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
            ctx.stroke();

            //thegoneheart 完整例子

            ctx.beginPath();
            ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
            ctx.moveTo(110, 75);
            ctx.arc(75, 75, 35, 0, Math.PI, false);   // Mouth (clockwise)
            ctx.moveTo(65, 65);
            ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
            ctx.moveTo(95, 65);
            ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(40, 75);
            ctx.lineTo(60, 65);
            ctx.lineTo(90, 65);
            ctx.moveTo(110, 75);
            ctx.lineTo(125, 75);
            ctx.stroke();
        }
    }
    window.onload = draw;
</script>
</head>
<body>
    <canvas id="Canvas1" width="150" height="150"></canvas>
</body>
</html>
